<template>
  <div>
    <el-dialog :visible.sync="dialog" title="商户创建" custom-class="dialogClass">
      <el-form class="dialogForm" label-position="top" :model="addUserForm" :rules="addRules" ref="addRef">

        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserForm.username"></el-input>
        </el-form-item>


        <el-form-item label="联系电话">
          <el-input v-model="addUserForm.phone"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="addUserForm.sex">
            <el-radio v-for="item in optionsGroup[$api.Enum.DicTypeSex]" :key="item.id" :label="item.id">{{ item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="公司描述" class="textareaInput">
          <el-input v-model="addUserForm.firm" type="textarea" rows="2" width="100%"></el-input>
        </el-form-item>

        <el-divider>账号信息</el-divider>
        <el-form-item label="账号" prop="account">
          <el-input v-model="addUserForm.account"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="addUserForm.password"></el-input>
        </el-form-item>

        <el-form-item label="角色" prop="level">
          <el-select v-model="addUserForm.level" placeholder="请选择">
            <el-option v-for="item in optionsGroup[$api.Enum.DicTypeLevel]" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="结算模式">
          <el-select v-model="addUserForm.settlement_type" placeholder="请选择">
            <el-option v-for="item in optionsGroup[$api.Enum.DicSettlementType]" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="buttonBox">
          <el-button type="success" @click="submitButton">提交</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "WuliankaAddadmin",

  data() {
    return {
      addUserForm: {
        account: "", //账户
        password: "", //密码
        username: "", //用户名
        sex: 3, //性别：1.男、2.女、3.保密
        level: '', //角色等级：1.管理员、11.应用商、21.代理商、31.零售商
        phone: "", //联系电话
        firm: "", //公司描述
        settlement_type: '', // 结算模式
      },
      dialog: false,
      optionsGroup: [],
      addRules: {
        account: [{ required: true, message: '请输入账户!', }],
        password: [{ required: true, message: '请输入密码!', }],
        username: [{ required: true, message: '请输入用户名!', }],
        sex: [{ required: true, message: '请选择性别!', }],
        level: [{ required: true, message: '请选择等级!', }],
      }
    };
  },

  mounted() {
    let types = [this.$api.Enum.DicTypeSex, this.$api.Enum.DicTypeLevel, this.$api.Enum.DicSettlementType]
    this.$api.foundation.dicListExtendCache(types, {}, res => {
      this.optionsGroup = res;
    });
  },

  methods: {
    close() {
      this.dialog = false;
    },
    submitButton() {
      this.$refs.addRef.validate(valid => {
        if (!valid) {
          return this.$message.warning('请完善内容后提交!')
        }
        let body = this.$tool.copyJSON(this.addUserForm)
        body.settlement_type = Number(body.settlement_type)

        this.$api.merchant.merchantCreate(body, res => {
          if (!res.status) {
            return this.$message.error(res.message);
          }
          this.$message.success("创建成功!");
          this.dialog = false;
          this.$emit('submitSuccess')
        });
      })
    }
  }
};
</script>

<style lang="less" scoped>
.addUser {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .el-form-item {
    margin-right: 15px;
  }

  .button {
    width: 100%;
    text-align: end;
    margin-top: 15px;
  }
}
</style>